<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单布局</title>
		<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
	</head>
	<body>
		<!-- 
			表单布局
				水平表单
					设置样式： .form-horizontal
				内联表单
					设置样式： .form-inline
		 -->
		 <form action="#" class="form-horizontal" role="form">
			 <h2 align="center">用户信息表</h2>
			 <!-- 表单中的表单元素组-->
		 	<div class="form-group">
				<label for="uname" class="control-label col-md-2">姓名</label>
				<div class="col-md-8">
					<input type="text" id="uname" class="form-control" placeholder="请输入姓名" />
				</div>
			</div>
			<div class="form-group">
				<label for="upwd" class="control-label col-md-2">密码</label>
				<div class="col-md-8">
					<input type="password" id="upwd" class="form-control" placeholder="请输入密码" />
				</div>
			</div>
			<div class="form-group">
				<label  class="control-label col-md-2">爱好</label>
				<div class="col-md-8 col-md-offset-1">
					<label class="checkbox-inline">
						<input type="checkbox" name="hobby" /> 唱歌
					</label>
					<label class="checkbox-inline">
						<input type="checkbox" name="hobby" /> 跳舞
					</label>
				</div>
			</div>
			<div class="form-group">
				<label class="control-label col-md-2">城市</label>
				<div class="col-md-8">
					<select class="form-control">
						 <option>请选择城市</option>
						 <option>上海</option>
						 <option>北京</option>
					</select>
				</div>
			</div>
			<div class="form-group">
				<label for="remark" class="control-label col-md-2">简介</label>
				<div class="col-md-8">
					<textarea id="remark" class="form-control"></textarea>
				</div>
			</div>
			<div class="form-group">
				
				<div class="col-md-2 col-md-offset-5">
					<button class="btn btn-primary">提交</button>
				</div>
			</div>
		 </form>
		 <hr />
		 <form class="form-inline">
			 <div class="form-group">
				 <label for="userName">姓名</label>
				 <input type="text" id="userName" class="form-control" placeholder="请输入姓名" />
			 </div>
			 <div class="form-group">
				 <label for="userPwd">密码</label>
				 <input type="text" id="userPwd" class="form-control" placeholder="请输入密码" />
			 </div>
			 <div class="form-group">
			 	<button class="btn btn-default">提交</button>
			 </div>
		 </form>
		 
	</body>
</html>
